<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>毛玻璃效果</title>
  </head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
    --x: 50vw;
    --y: 50vh;
  }
  section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  section .imgBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("./test-image.png");
    background-size: 100%;
    background-position: calc(var(--x)/5) calc(var(--y)/5);
  }

  section .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
  }

  section .box.box2 {
    background: url("./test-image.png");
    background-size: 100%;
    clip-path: circle(260px at center);
    background-position: calc(var(--x)/5) calc(var(--y)/5);
  }

  section .box.box2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    height: 520px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25);
    z-index: 10;
    border-radius: 50%;
  }

  section h1 {
    position: absolute;
    margin-top: 30%;
    color: #fff;
    font-size: 88px;
    transform: translate(calc(var(--x)/5), calc(var(--y)/5));
  }
</style>
<body>

<section>
  <div class="imgBx">
  <h1>毛玻璃效果</h1>
  </div>
  <div class="box box1"></div>
  <div class="box box2">
  <h1>毛玻璃效果</h1>
  </div>
  </section>
<script>
  const position = document.documentElement;
  position.addEventListener('mousemove', e => {
    position.style.setProperty('--x', e.pageX + 'px');
    position.style.setProperty('--y', e.pageY + 'px');
  })
</script>

</body>

</html>
